<script setup>
import { getTeahProjList } from '@/api/teacher/teacher.js'
import { useUserStore } from '@/stores'
import { NButton } from 'naive-ui'
import { downloadFile,getApprovalResult,addApprovalRecord } from '@/api/secretary/seretary.js'

/* 获取审核结果列表 */
const resultOpinion = ref()
const getResult = async() => {
  const { data: res } = await getApprovalResult()
  if(res.code === 1) {
    resultOpinion.value = res.data.map(item => ({label:item.result,value:item.id}))
  }
  else if( res.code === 0) {
    alert(res.message)
  }
}
//调用获取审核结果列表方法
getResult()


/* 表格信息 */
const columns = [
  { title: '序号', key: 'key', render: (_,index) =>`${index + 1}`, align: "center" },
  { title: '申请人',key: 'name', align: 'center' },
  { title: '工号',key: 'jobNumber', align: 'center' },
  { title: '项目名称', key: 'projectName', align: "center" },
  { title: '项目级别', key: 'level', align: "center" },
  { title: '获批年度', key: 'year', align: "center" },
  { title: '项目负责人', key: 'leader', align: "center" },
  { title: '其他成员', key: 'others', align: "center" },
  { title: '相关附件', key: 'attachment', align: "center", render: row => {
    return h(NButton,{
              size: 'small', type: 'info', quaternary: true, onclick: () => {
                const url = 'http://localhost:8080' + row.attachment
                window.open(url,"_blank")
              }},
              { default: () => '查看' }
            )
  } },
  { title: '备注', key: 'comment', align: "center" },
  { title: '操作', key: 'operate', align: "center", render: row => {
    return [
      h(NButton,{
        size: 'small', type: 'primary', secondary: true, onclick: () => {
          showMoreModal.value = true
          viewForm.value.name = row.name
          viewForm.value.jobNumber = row.jobNumber
          viewForm.value.projectName = row.projectName
          viewForm.value.level = row.level
          viewForm.value.year = row.year
          viewForm.value.leader = row.leader
          viewForm.value.others = row.others
          viewForm.value.attachment = row.attachment
          viewForm.value.comment = row.comment
        }
      },
      { default: () => '详情'}
      ),
      h(NButton,{
        size: 'small', type: 'info', secondary: true, onclick: () => {
          if(userStore.roleId === 2) checkValue.value.approvalPhaseId = 1
          else if(userStore.roleId === 3) checkValue.value.approvalPhaseId = 2
          checkValue.value.approvalResultId = null
          checkValue.value.achievementId = row.codeNumber
          checkValue.value.opinion = null
          showCheckModal.value = true
          console.log(checkValue.value)
        }
      },
      { default: () => '审核'}
      )
    ]
  } }
]

/* 分页 */
const currentPage = ref(1)
const page_size = ref(5)
const itemCount = ref(null)
const onUpdatePage = async() => { 
  const statusId = userStore.roleId
  const pageSize = page_size.value
  const page = currentPage.value
  const { data:res } = await getTeahProjList({statusId,pageSize,page})
  if (res.code  === 1) {
    data.value = res.data.rows
  }
  else if(res.code === 0) {
    alert(res.message)
  }
}

/* 获取要审核的教学项目列表 */
const data = ref([])
const userStore = useUserStore()
const getData = async() => {
  const statusId = userStore.roleId
  const pageSize = page_size.value
  const { data:res } = await getTeahProjList({statusId,pageSize})
  if (res.code  === 1) {
    data.value = res.data.rows
    itemCount.value = res.data.total
  }
  else if(res.code === 0) {
    alert(res.message)
  }
}
//调用获取需要审核的教师教学项目列表
getData()

/* 详情模态框 */
const showMoreModal = ref(false)
const viewForm = ref({
  name: null,
  jobNumber: null,
  projectName: null,
  level: null,
  year: null,
  leader: null,
  others: null,
  attachment: null,
  comment: null,
})


/* 审核模态框 */
const showCheckModal = ref(false)
const checkValue=ref({
  approvalPhaseId: null,
  approvalResultId: null,
  achievementId: null,
  achievementTypeId: 1,
  opinion: null
})
//审核结果确认方法
const onPositiveClick = async() => {
  const { data: res } = await addApprovalRecord(checkValue.value)
  if(res.code === 1) alert('审核成功')
  else if(res.code === 0) alert(res.msg)
  showCheckModal.value = false
  console.log(checkValue.value)
  onUpdatePage()
}
//审核结果取消方法
const onNegativeClick = () => {
  showCheckModal.value = false
}
</script>

<template>
  <div>
    <div class="title">教学项目信息审核</div>
    <n-data-table
      :columns="columns"
      :data="data"
      bordered
      :single-line="false"
    />
    <div class="pagination">
      <n-pagination v-model:page="currentPage"
                  @update-page="onUpdatePage"
                  :page-size="page_size"
                  :item-count="itemCount"/>
    </div>
    <!-- 详情模态框 -->
    <n-modal v-model:show="showMoreModal">
        <n-card style="width: 480px;"
              title="教学项目详情"
              bordered
              closable
              @close="showMoreModal=false"
              size="small"
              role="dialog"
              aria-modal="true">
          <n-form style="padding-top: 10px;"
                label-placement="left"
                label-width="100"
                label-align="right">
          <n-form-item label="申请人:" path="name">
            <span>{{ viewForm.name }}</span>
          </n-form-item>
          <n-form-item label="工号:" path="jobNumber">
            <span>{{ viewForm.jobNumber }}</span>
          </n-form-item>
          <n-form-item label="项目名称:" path="projectName">
            <span>{{ viewForm.projectName }}</span>
          </n-form-item>
          <n-form-item label="项目级别:" path="level">
            <span>{{ viewForm.level }}</span>
          </n-form-item>
          <n-form-item label="获批年度:" path="year">
            <span>{{ viewForm.year }}</span>
          </n-form-item>
          <n-form-item label="项目负责人:" path="leader">
            <span>{{ viewForm.leader }}</span>
          </n-form-item>
          <n-form-item label="其他成员:" path="others">
            <span>{{ viewForm.others }}</span>
          </n-form-item>
          <n-form-item label="相关附件:" path="attachment">
                <a :href = "'http://localhost:8080'+ viewForm.attachment" target="_blank" style="color: #2080f0;">查看</a>
          </n-form-item>
          <n-form-item label="备注:" path="comment">
            <span>{{ viewForm.comment }}</span>
          </n-form-item>
        </n-form>
        </n-card>
      </n-modal>

    <!-- 审核模态框 -->
    <n-modal
      v-model:show="showCheckModal"
      :mask-closable="false"
      preset="dialog"
      title="审核"
      positive-text="确认"
      negative-text="取消"
      @positive-click="onPositiveClick"
      @negative-click="onNegativeClick"
    >
      <div>
        <n-space vertical>
          <n-select v-model:value="checkValue.approvalResultId" :options="resultOpinion" placeholder="审核意见" />
          <n-input
            v-model:value="checkValue.opinion"
            type="textarea"
            placeholder="审核意见"
          />
        </n-space>
      </div>
    </n-modal>

  </div>
</template>

<style scoped>
.pagination {
  float: right;
  padding-top: 50px;
}
.title{
  color: rgb(5,93,163);
  text-align: center;
  font-size:22px;
  font-family: "Microsoft Yahei","Helvetica Neue", Helvetica, Arial, sans-serif;
  border-bottom: 1px solid rgb(193, 217, 237);
  margin-bottom: 5px;
}
::v-deep .n-data-table-th__title{
  font-weight: 600;
}
span {
  width: 364px;
  padding: 5px;
  border: 1px solid rgb(184, 182, 182);
  min-height: 15px;
}
::v-deep .n-data-table-td{
  padding: 6px;
}
</style>